<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="3" class="">
            <div class="">累计数据概要</div>
          </el-col>
          <el-col :span="21" class="">
            <div class="">
              <el-select v-if="roleCheck('virtual')" v-model="generalStatisticsRange">
                <el-option v-for="item in consts.STATISTICS_RANGE"
                           :key="item.value"
                           :label="item.title"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row>
          <el-row class="db-category-list">
            <el-col class="db-category-item"
                    v-for="(summary,key) in summaryList"
                    :span="summary.span" :xs="summary.span" :md="summary.span"
                    :key="key"
            >
              <div v-if=" key=='recharge' || key == 'rechargeUser' || key == 'withdraw'">
                <div class="card-name">{{summary.name}}</div>
                <div class="card-data">{{summary.data | currency(undefined,0)}}</div>
                <!--<div class="card-data">{{ (category.data && category.data.length==2 && category.data[1])||0}}</div>-->
              </div>
              <div v-else>
                <div class="card-name">{{summary.name}}</div>
                <div class="card-data">{{summary.data | currency}}</div>
                <!--<div class="card-data">{{ (category.data && category.data.length==2 && category.data[1])||0}}</div>-->
              </div>
            </el-col>
          </el-row>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="12" class="">
            <div class="">数据统计汇总</div>
          </el-col>

          <el-col :span="12" align="right">
            <el-date-picker v-model="summaryTime" type="daterange" align="right" unlink-panels range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            change="summaryTimeChangeHandler"
                            :picker-options="pickerDayStep">
            </el-date-picker>
          </el-col>
        </el-row>

      </div>
      <div>
        <el-row :span="24">
          <el-col :span="14" align="right">
            <el-button class="filter-item" type="text" @click="checkDetail('rechargeWithdraw')">查看详细数据</el-button>
          </el-col>
          <el-col :span="7" align="right">
            <el-button class="m-r-10" type="text" @click="checkDetail('onPoints')">查看详细数据</el-button>
          </el-col>
          <el-col :span="3" align="right">
            <el-button class="m-r-10" type="text" @click="checkDetail('newUser')">查看详细数据</el-button>
          </el-col>
          <!--<el-col :span="16" align="right">-->
          <!--<el-button class="filter-item" type="text" @click="checkDetail('rechargeWithdraw')">查看详细数据</el-button>-->
          <!--</el-col>-->
          <!--<el-col :span="8" align="right">-->
          <!--<el-button class="filter-item" type="text" @click="checkDetail('onPoints')">查看详细数据</el-button>-->
          <!--</el-col>-->
        </el-row>
        <el-row :gutter=10>
          <el-col class="db-category-item "  :class="{active:currentCategory==item.key,'gutter': item.className=='gutter'}"
                  v-for="(item,index) in categoryList"
                  :span="item.span" :xs="item.span*2" :md="item.span"
                  :key="item.key" v-if="index<7">
            <div @click="categoryChange(item.key)" v-if="item.decimal==2">
              <div class="card-name">{{item.name}}</div>
              <div class="card-data">{{item.data||0 | currency}}</div>
            </div>
            <div @click="categoryChange(item.key)" v-else>
              <div class="card-name">{{item.name}}</div>
              <div class="card-data">{{item.data||0  | currency(undefined,0)
                }}
              </div>

            </div>
          </el-col>
        </el-row>
        <el-row :span="24" :gutter=10>
          <el-col :span="15" align="right">
            <el-button class="filter-item" type="text" @click="checkDetail('betting')">查看详细数据</el-button>
          </el-col>
          <el-col :span="6" align="right">
            <el-button class="m-r-10" type="text" @click="checkDetail('promo')">查看详细数据</el-button>
          </el-col>
          <el-col :span="3" align="right">
            <el-button class="filter-item" type="text" @click="checkDetail('activeUser')">查看详细数据</el-button>
          </el-col>
          <!--<el-col :span="16" align="right">-->
          <!--<el-button class="filter-item" type="text" @click="checkDetail('betting')">查看详细数据</el-button>-->
          <!--</el-col>-->
          <!--<el-col :span="8" align="right">-->
          <!--<el-row>-->
          <!--<el-col :span="12" align="right">-->
          <!--<el-button class="filter-item" type="text" @click="checkDetail('newUser')">查看详细数据</el-button>-->
          <!--</el-col>-->
          <!--<el-col :span="12" align="right">-->
          <!--<el-button class="filter-item" type="text" @click="checkDetail('activeUser')">查看详细数据</el-button>-->
          <!--</el-col>-->
          <!--</el-row>-->
          <!--</el-col>-->
        </el-row>
        <el-row>
          <el-col class="db-category-item " :class="{active:currentCategory==item.key,'gutter': item.className=='gutter'}"
                  v-for="(item,index) in categoryList"
                  :span="item.span" :xs="item.span*2" :md="item.span"
                  :key="item.key" v-if="index>6">
            <div @click="categoryChange(item.key)" v-if="item.decimal==2">
              <div class="card-name">{{item.name}}</div>
              <div class="card-data">{{item.data||0 | currency}}</div>
            </div>
            <div @click="categoryChange(item.key)" v-else>
              <div class="card-name">{{item.name}}</div>
              <div class="card-data">{{item.data||0 | currency(undefined,0)
                }}
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="category-echart height-300">
          <category-chart :type="currentCategory" :x-data="currentXData" :y-data="currentYData"></category-chart>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="3" class="">
            <div class="">公司游戏数据汇总</div>
          </el-col>
          <el-col :span="9" class="">
            <div class="">
              <el-select v-if="roleCheck('virtual')"  v-model="profitStatisticsRange">
                <el-option v-for="item in consts.STATISTICS_RANGE"
                           :key="item.value"
                           :label="item.title"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12" align="right">
            <el-date-picker v-model="gameTime" type="daterange" align="right" unlink-panels range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            @change="gameTimeDataTimeChangeHandler"
                            :picker-options="pickerDayStep">
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
      <!--<div class="height-200" ref="profitChart">-->
        <!--<el-table :data="gameData" border style="width:100%">-->
          <!--<el-table-column v-for="(item,index) in consts.GAME_WIN_BET" :key="item.prop+index"-->
                           <!--:prop="item.prop"-->
                           <!--:label="item.label">-->
            <!--<template slot-scope="{row}">-->
              <!--<span  v-if="item.prop!=='typeName'" :class="{'green': row[item.prop]>0,'red': row[item.prop]<0}">{{row[item.prop] | currency}}</span>-->
              <!--<span v-else>{{row[item.prop]}}</span>-->
            <!--</template>-->
          <!--</el-table-column>-->
        <!--</el-table>-->
      <!--</div>-->
      <div class="height-200 list-profit-loss" ref="profitChart">
        <div class="detail" v-for="(item,index) in consts.GAME_WIN_BET" :key="item.prop+index">
          <div class="detail-item">{{item.label}}</div>
          <template v-if="index === 0">
            <div class="detail-item">{{gameData[index].typeName}}</div>
            <div class="detail-item">{{gameData[index + 1].typeName}}</div>
          </template>
          <template v-else>
            <div class="detail-item" :class="{'green': gameData[0][item.prop]>0,'red': gameData[0][item.prop]<0}">{{gameData[0][item.prop] | currency}}</div>
            <div class="detail-item" :class="{'green': gameData[1][item.prop]>0,'red': gameData[1][item.prop]<0}">{{gameData[1][item.prop] | currency}}</div>
          </template>
        </div>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix bg-pure-dark">
        <el-row>
          <el-col :span="24" class="">
            <div class="">公司游戏盈亏图表数据</div>
            <div class="db-profit-filter">
              <el-button type="text" :class="{active:currentGameStatisticType=='win'}"
                         @click="changeGameStatisticType('win')">盈亏数据
              </el-button> &nbsp;&nbsp;|
              <el-button type="text" :class="{active:currentGameStatisticType=='amount'}"
                         @click="changeGameStatisticType('amount')">投注额数据
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="height-300 profit-chart" ref="profitChart">
        <profit-chart :x-data="gameXData" :y-data="gameYData"></profit-chart>
      </div>
    </el-card>
    <custom-dialog :visible="visibleDialog=='rechargeWithdraw'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">充值提现明细</div>
      <recharge-withdraw-detail v-if="visibleDialog=='rechargeWithdraw'" :time="dialogProps" :isFake="generalStatisticsRange"></recharge-withdraw-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='onPoints'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">实际代充总额</div>
      <on-points-detail v-if="visibleDialog=='onPoints'" :time="dialogProps" :isFake="generalStatisticsRange"></on-points-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='newUser'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">新用户明细</div>
      <new-user-detail v-if="visibleDialog=='newUser'" :time="dialogProps" :isFake="generalStatisticsRange"></new-user-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='activeUser'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">活跃用户明细</div>
      <active-user-detail v-if="visibleDialog=='activeUser'" :time="dialogProps" :isFake="generalStatisticsRange"></active-user-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='betting'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">投注详情</div>
      <betting-detail v-if="visibleDialog=='betting'" :time="dialogProps" :isFake="generalStatisticsRange"></betting-detail>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='firstdata'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">首存人数金额明细</div>
      <first-data v-if="visibleDialog=='firstdata'" :time="dialogProps" :isFake="generalStatisticsRange"></first-data>
    </custom-dialog>
    <custom-dialog :visible="visibleDialog=='promo'" returnButtonName="返回" :callback="closeDialog">
      <div slot="title">优惠详情</div>
      <promo-general-detail v-if="visibleDialog=='promo'" :time="dialogProps" ></promo-general-detail>
    </custom-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import categoryChart from '../components/categoryChart';
import ProfitChart from '../components/porfitChart';
import CommonChart from '../components/commonChart';
import { pickerOption } from '@/build';
import rechargeWithdrawDetail from '../detail/rechargeWithdrawDetail';
import newUserDetail from '../detail/newUserDetail';
import onPointsDetail from '../detail/onPointsDetail';
import activeUserDetail from '../detail/activeUserDetail';
import bettingDetail from '../detail/bettingDetail';
import firstData from '../detail/firstData';
import promoGeneralDetail from '../detail/promoGeneralDetail';
import {
  trendPromoInfoApi,
} from '@/services/api/operationalRealTime';
import getCommand from '@/mixins/getCommand';

export default {
  name: 'trend',
  components: {
    CommonChart,
    ProfitChart,
    categoryChart,
    rechargeWithdrawDetail,
    newUserDetail,
    onPointsDetail,
    activeUserDetail,
    bettingDetail,
    firstData,
    promoGeneralDetail,
  },
  mixins: [pickerOption, getCommand],
  data() {
    // let times = _.toPeriod({
    //   start: [-1, 'days'],
    //   end: [0, 'days'],
    //   format: 'YYYY-MM-DD'
    // });
    // 本月时间本月1号至当前时间
    const monthTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
    return {
      categoryData: {
        dateList: [],
      },
      generalStatisticsRange: 0,
      profitStatisticsRange: 0,
      promoInfo: {}, // 活动数据
      summaryTime: monthTime,
      gameTime: monthTime,
      currentCategory: undefined,
      currentGameStatisticType: 'win',
      filters: {
        stime: moment(monthTime[0]).valueOf(),
        etime: moment(monthTime[1]).valueOf() + 86399999,
      },
      // 当日的盈亏
      visibleDialog: undefined, // rechargeWithdraw,newUser,activeUser,betting,promo
      dialogProps: monthTime,
    };
  },
  computed: {
    ...mapGetters([]),
    ...mapState({
      trend: state => state.trend,
    }),
    summaryList() { // 累计数据概要
      // let summary = this.trend.summary;
      const basic = this.trend.basic || {};
      return {
        recharge: {
          type: 1,
          key: 'recharge',
          name: '累计注册会员数',
          span: 5,
          data: basic.totalRegUser,
        },
        rechargeUser: {
          type: 2,
          key: 'rechargeUser',
          name: '累计充值会员数',
          span: 5,
          data: basic.totalRechargeUser,
        },
        withdraw: {
          type: 3,
          key: 'withdraw',
          name: '累计投注会员数',
          span: 4,
          data: basic.totalBettingUser,
        },
        withdrawUser: {
          type: 4,
          key: 'withdrawUser',
          name: '累计提现金额',
          span: 5,
          data: basic.totalWithdrawMoney,
        },
        newUser: {
          type: 5,
          key: 'newUser',
          name: '累计获得佣金额',
          span: 5,
          data: basic.totalCommission,
        },
      };
    },
    // 实时当前图表数据
    currentDate() {
      const array = [];
      _.forIn(this.trend && this.trend[this.currentCategory] && this.trend[this.currentCategory] || {}, (value, key) => {
        array.push({
          x: key,
          y: value,
        });
      });
      return _.sortBy(array, item => item.x);
    },
    // 实时基本数据
    categoryList() {
      const basic = this.trend.summary || {};
      const { promoInfo } = this;
      return [
        {
          key: 'recharge',
          name: '充值',
          span: 4,
          data: basic.rechargeSumMoney,
          decimal: 2,
        },
        {
          key: 'rechargeUser',
          name: '充值人数',
          span: 3,
          data: basic.rechargeUniqueUser,
        },
        {
          key: 'withdraw',
          name: '总出款',
          span: 4,
          data: basic.withdrawSumMoney,
          decimal: 2,
        },
        {
          key: 'withdrawUser',
          name: '出款人数',
          span: 3,
          data: basic.withdrawUniqueUser,
          className: 'gutter',
        },
        {
          key: 'upAmountUnique',
          name: '代充总人数',
          span: 3,
          data: basic.upAmountUniqueUser,
        },
        {
          key: 'onPoints',
          name: '实际代充总额',
          span: 4,
          data: basic.upAmountSumMoney,
          className: 'gutter',
          decimal: 2,
        },
        {
          key: 'newUser',
          name: '新注册会员',
          span: 3,
          data: basic.newUserCnt,
        },
        // 第二排
        {
          key: 'bettingAmount',
          name: '总投注额',
          span: 4,
          data: basic.bettingSumMoney,
          decimal: 2,
        },
        {
          key: 'bettingWin',
          name: '会员输赢',
          span: 4,
          data: basic.totalWinLose,
          decimal: 2,
        },
        {
          key: 'bettingEffect',
          name: '有效投注额',
          span: 4,
          data: basic.bettingEffectMoney, // todo -缺少该数据字段
          decimal: 2,
        },
        {
          key: 'bettingUser',
          name: '投注人数',
          span: 3,
          data: basic.bettingUniqueUser,
          className: 'gutter',
        },
        {
          key: 'promoUser',
          name: '活动参与人数',
          span: 3,
          data: promoInfo.participantsNumber || [0, 0],
        },
        {
          key: 'promoAmount',
          name: '活动领取金额',
          span: 3,
          data: promoInfo.receivingAmount || [0, 0],
          decimal: 2,
          className: 'gutter',
        },
        {
          key: 'activeUser',
          name: '活跃会员',
          span: 3,
          data: basic.activeUserCnt,
        },
      ];
    },
    // 实时盈亏数据
    gameData() {
      const game = this.trend.gameProfitBasic
          || {
            1001: { game: 'AG真人', amount: 0, win: 0 },
            1004: { game: 'AG捕鱼', amount: 0, win: 0 },
            7002: { game: '贝博体育', amount: 0, win: 0 },
            4003: { game: 'PT电子', amount: 0, win: 0 },
            2001: { game: 'eBET真人', amount: 0, win: 0 },
            8000: { game: 'LB彩票', amount: 0, win: 0 },
            10006: { game: '欢乐棋牌', amount: 0, win: 0 },
            11006: { game: '贝博棋牌', amount: 0, win: 0 },
            1003: { game: 'AG电子', amount: 0, win: 0 },
            2003: { game: 'eBET电子', amount: 0, win: 0 },
            13001: { game: '小金真人', amount: 0, win: 0 },
            19000: { game: '双赢彩票', amount: 0, win: 0 },
            17003: { game: 'PP电子', amount: 0, win: 0 },
            12000: { game: '5GM彩票', amount: 0, win: 0 },
            23004: { game: 'MW捕鱼', amount: 0, win: 0 },
            18005: { game: 'IM电竞', amount: 0, win: 0 },
            // 16002: { game: '虚拟体育', amount: 0, win: 0 },
          };
      return [
        {
          typeName: '盈亏',
          prop0: this.getTotal(1, game),
          prop1: this.checkGame(1, game, consts.PLATFORM_AG_REAL),
          prop2: this.checkGame(1, game, consts.PLATFORM_AG_FISH),
          prop3: this.checkGame(1, game, consts.PLATFORM_AG_GAME),
          prop4: this.checkGame(1, game, consts.PLATFORM_PT),
          prop5: this.checkGame(1, game, consts.PLATFORM_EBET_REAL),
          prop6: this.checkGame(1, game, consts.PLATFORM_EBET_GAME),
          prop7: this.checkGame(1, game, consts.PLATFORM_JOY_POKER),
          prop8: this.checkGame(1, game, consts.PLATFORM_GM_POKER),
          prop9: this.checkGame(1, game, consts.PLATFORM_GAME_SPORTS),
          prop10: this.checkGame(1, game, consts.PLATFORM_TICKET),
          prop11: this.checkGame(1, game, consts.PLATFORM_SMALL_GOLD_REAL),
          prop12: this.checkGame(1, game, consts.PLATFORM_WINWIN_LOTTERY),
          prop13: this.checkGame(1, game, consts.PLATFORM_PP_GAME),
          prop14: this.checkGame(1, game, consts.PLATFORM_FIVE_GM_LOTTERY),
          prop16: this.checkGame(1, game, consts.PLATFORM_MW_FISH),
          prop17: this.checkGame(1, game, consts.PLATFORM_IM_ESPORT),
          // prop18: this.checkGame(1, game, consts.PLATFORM_VIRTUAL_SPORT),
        },
        {
          typeName: '投注额',
          prop0: this.getTotal(2, game),
          prop1: this.checkGame(2, game, consts.PLATFORM_AG_REAL),
          prop2: this.checkGame(2, game, consts.PLATFORM_AG_FISH),
          prop3: this.checkGame(2, game, consts.PLATFORM_AG_GAME),
          prop4: this.checkGame(2, game, consts.PLATFORM_PT),
          prop5: this.checkGame(2, game, consts.PLATFORM_EBET_REAL),
          prop6: this.checkGame(2, game, consts.PLATFORM_EBET_GAME),
          prop7: this.checkGame(2, game, consts.PLATFORM_JOY_POKER),
          prop8: this.checkGame(2, game, consts.PLATFORM_GM_POKER),
          prop9: this.checkGame(2, game, consts.PLATFORM_GAME_SPORTS),
          prop10: this.checkGame(2, game, consts.PLATFORM_TICKET),
          prop11: this.checkGame(2, game, consts.PLATFORM_SMALL_GOLD_REAL),
          prop12: this.checkGame(2, game, consts.PLATFORM_WINWIN_LOTTERY),
          prop13: this.checkGame(2, game, consts.PLATFORM_PP_GAME),
          prop14: this.checkGame(2, game, consts.PLATFORM_FIVE_GM_LOTTERY),
          prop16: this.checkGame(2, game, consts.PLATFORM_MW_FISH),
          prop17: this.checkGame(2, game, consts.PLATFORM_IM_ESPORT),
          // prop18: this.checkGame(2, game, consts.PLATFORM_VIRTUAL_SPORT),
        },
      ];
    },
    currentXData() {
      return _.map(this.currentDate, item => item.x);
    },
    currentYData() {
      return _.map(this.currentDate, item => item.y);
    },
    gameChartAllData() {
      const gameChartAllData = [];
      _.forIn(this.trend.gameProfit, (value, key) => {
        gameChartAllData.push(
          {
            x: key,
            y: value,
          },
        );
      });
      return _.sortBy(gameChartAllData, item => item.x);
    },
    gameXData() {
      return _.map(this.gameChartAllData, item => item.x);
    },
    gameYData() {
      const returnData = [];
      const gameList = {
        agReal: {
          id: 1,
          title: 'AG真人',
          value: [],
        },
        agFish: {
          id: 2,
          title: 'AG捕鱼',
          value: [],
        },
        agGame: {
          id: 6,
          title: 'AG电子',
          value: [],
        },
        ebet: {
          id: 5,
          title: 'eBET真人',
          value: [],
        },
        pt: {
          id: 4,
          title: 'PT电子',
          value: [],
        },
        xj188: {
          id: 3,
          title: '贝博体育',
          value: [],
        },
        sycp: {
          id: 8,
          title: 'LB彩票',
          value: [],
        },
        hlqp: {
          id: 10,
          title: '欢乐棋牌',
          value: [],
        },
        gmqp: {
          id: 11,
          title: '贝博棋牌',
          value: [],
        },
        ebetGame: {
          id: 12,
          title: 'eBET电子',
          value: [],
        },
        smallGoldReal: {
          id: 14,
          title: '小金真人',
          value: [],
        },
        winwinLottery: {
          id: 19,
          title: '双赢彩票',
          value: [],
        },
        ppGame: {
          id: 17,
          title: 'PP电子',
          value: [],
        },
        fiveGmLottery: {
          id: 13,
          title: '5GM彩票',
          value: [],
        },
        mwFish: {
          id: 15,
          title: 'MW捕鱼',
          value: [],
        },
        imEsport: {
          id: 18,
          title: 'IM电竞',
          value: [],
        },
        // virtualSport: {
        //   id: 16,
        //   title: '虚拟体育',
        //   value: [],
        // },
      };

      _.each(this.gameChartAllData, (item) => {
        const yData = item.y;
        gameList.agReal.value.push(yData[consts.PLATFORM_AG_REAL] && yData[consts.PLATFORM_AG_REAL][this.currentGameStatisticType]);
        gameList.agFish.value.push(yData[consts.PLATFORM_AG_FISH] && yData[consts.PLATFORM_AG_FISH][this.currentGameStatisticType]);
        gameList.ebet.value.push(yData[consts.PLATFORM_EBET_REAL] && yData[consts.PLATFORM_EBET_REAL][this.currentGameStatisticType]);
        gameList.pt.value.push(yData[consts.PLATFORM_PT] && yData[consts.PLATFORM_PT][this.currentGameStatisticType]);
        gameList.xj188.value.push(yData[consts.PLATFORM_GAME_SPORTS] && yData[consts.PLATFORM_GAME_SPORTS][this.currentGameStatisticType]);
        gameList.sycp.value.push(yData[consts.PLATFORM_TICKET] && yData[consts.PLATFORM_TICKET][this.currentGameStatisticType]);
        gameList.hlqp.value.push(yData[consts.PLATFORM_JOY_POKER] && yData[consts.PLATFORM_JOY_POKER][this.currentGameStatisticType]);
        gameList.gmqp.value.push(yData[consts.PLATFORM_GM_POKER] && yData[consts.PLATFORM_GM_POKER][this.currentGameStatisticType]);
        gameList.agGame.value.push(yData[consts.PLATFORM_AG_GAME] && yData[consts.PLATFORM_AG_GAME][this.currentGameStatisticType]);
        gameList.ebetGame.value.push(yData[consts.PLATFORM_EBET_GAME] && yData[consts.PLATFORM_EBET_GAME][this.currentGameStatisticType]);
        gameList.smallGoldReal.value.push(yData[consts.PLATFORM_SMALL_GOLD_REAL] && yData[consts.PLATFORM_SMALL_GOLD_REAL][this.currentGameStatisticType]);
        gameList.winwinLottery.value.push(yData[consts.PLATFORM_WINWIN_LOTTERY] && yData[consts.PLATFORM_WINWIN_LOTTERY][this.currentGameStatisticType]);
        gameList.ppGame.value.push(yData[consts.PLATFORM_PP_GAME] && yData[consts.PLATFORM_PP_GAME][this.currentGameStatisticType]);
        gameList.fiveGmLottery.value.push(yData[consts.PLATFORM_FIVE_GM_LOTTERY] && yData[consts.PLATFORM_FIVE_GM_LOTTERY][this.currentGameStatisticType]);
        gameList.mwFish.value.push(yData[consts.PLATFORM_MW_FISH] && yData[consts.PLATFORM_MW_FISH][this.currentGameStatisticType]);
        gameList.imEsport.value.push(yData[consts.PLATFORM_IM_ESPORT] && yData[consts.PLATFORM_IM_ESPORT][this.currentGameStatisticType]);
        // gameList.virtualSport.value.push(yData[consts.PLATFORM_VIRTUAL_SPORT] && yData[consts.PLATFORM_VIRTUAL_SPORT][this.currentGameStatisticType]);
      });

      // eslint-disable-next-line no-unused-vars
      _.forIn(gameList, (game, key) => {
        const newGameList = _.map(game.value, item => Number(item).toFixed(2));
        returnData.push({
          title: game.title,
          value: newGameList,
        });
      });
      return returnData;
    },

  },
  watch: {
    currentCategory() {
      this.fetchCategoryDate();
    },
    summaryTime() {
      this.summaryTimeChangeHandler();
      this.fetchCategoryDate();
      this.doGet({ action: 'promoInfo' });
    },
    generalStatisticsRange(generalStatisticsRange) {
      this.$store.dispatch(types.GET_TREND_BASIC, { isFake: generalStatisticsRange });
      this.summaryTimeChangeHandler();
      this.fetchCategoryDate();
      this.doGet({ action: 'promoInfo' });
    },
    profitStatisticsRange(profitStatisticsRange) {
      this.gameTimeDataTimeChangeHandler();
    },
    // gameTime() {
    //   this.$store.dispatch(types.GET_TREND_GAME_PROFIT_BASIC, {
    //     stime: this.gameTime[0],
    //     etime: this.gameTime[1],
    //     project: consts.PLATFROM_PREFIX
    //   });
    //   this.$store.dispatch(types.GET_TREND_GAME_PROFIT, {
    //     stime: this.gameTime[0],
    //     etime: this.gameTime[1],
    //     project: consts.PLATFROM_PREFIX
    //   });
    // },
  },
  created() {
    this.currentCategory = 'recharge';
    this.bindGet(trendPromoInfoApi, 'promoInfo', {
      action: 'promoInfo',
      beforeSend: () => {
        let stime;
        let etime;
        if (!_.isUndefined(this.summaryTime) && _.isArray(this.summaryTime)) {
          stime = moment(this.summaryTime[0]).valueOf();
          etime = moment(this.summaryTime[1]).valueOf() + 86399999;
        }
        return {
          isFake: this.generalStatisticsRange,
          stime,
          etime,
        };
      },
    });
  },
  beforeDestroy() {
    clearInterval(this.TrendBasicInterval);
    clearInterval(this.GameProfitInterval);
  },
  mounted() {
    this.$store.dispatch(types.GET_TREND_BASIC);
    this.summaryTimeChangeHandler();
    this.gameTimeDataTimeChangeHandler();
    this.doGet({ action: 'promoInfo' });
  },
  methods: {
    summaryTimeChangeHandler() {
      let stime;
      let etime;
      if (!_.isUndefined(this.summaryTime) && _.isArray(this.summaryTime)) {
        stime = moment(this.summaryTime[0]).valueOf();
        etime = moment(this.summaryTime[1]).valueOf() + 86399999;
        this.dialogProps = [moment(this.summaryTime[0]).format('YYYY-MM-DD'), moment(this.summaryTime[1]).format('YYYY-MM-DD')];
      }
      this.$store.dispatch(types.GET_TREND_SUMMARY, {
        isFake: this.generalStatisticsRange,
        stime,
        etime,
        project: consts.PLATFROM_PREFIX,
      });
    },
    gameTimeDataTimeChangeHandler() {
      let stime;
      let etime;
      if (!_.isUndefined(this.gameTime) && _.isArray(this.gameTime)) {
        stime = moment(this.gameTime[0]).valueOf();
        etime = moment(this.gameTime[1]).valueOf() + 86399999;
      }
      this.$store.dispatch(types.GET_TREND_GAME_PROFIT_BASIC, {
        isFake: this.generalStatisticsRange,
        stime,
        etime,
        project: consts.PLATFROM_PREFIX,
      });
      this.$store.dispatch(types.GET_TREND_GAME_PROFIT, {
        isFake: this.generalStatisticsRange,
        stime,
        etime,
        project: consts.PLATFROM_PREFIX,
      });
    },
    fetchCategoryDate(params) {
      let targetAction = types.GET_TREND_RECHARGE;
      switch (this.currentCategory) {
        case 'recharge':
          targetAction = types.GET_TREND_RECHARGE;
          break;
        case 'rechargeUser':
          targetAction = types.GET_TREND_RECHARGE_USER;
          break;
        case 'withdraw':
          targetAction = types.GET_TREND_WITHDRAW;
          break;
        case 'withdrawUser':
          targetAction = types.GET_TREND_WITHDRAW_USER;
          break;
        case 'newUser':
          targetAction = types.GET_TREND_NEW_USER;
          break;
        case 'upAmountUnique':
          targetAction = types.GET_TREND_UP_USER;
          break;
        case 'onPoints':
          targetAction = types.GET_TREND_UP_AMOUNT;
          break;
        case 'activeUser':
          targetAction = types.GET_TREND_ACTIVE_USER;
          break;
        case 'bettingAmount':
          targetAction = types.GET_TREND_BETTING_AMOUNT;
          break;
        case 'bettingWin':
          targetAction = types.GET_TREND_BETTING_WIN;
          break;
        case 'bettingEffect':
          targetAction = types.GET_TREND_BETTING_EFFECT_AMOUNT;
          break;
        case 'bettingUser':
          targetAction = types.GET_TREND_BETTING_USER;
          break;
        case 'promoUser':
          targetAction = types.GET_TREND_PROMO_USER;
          break;
        case 'promoAmount':
          targetAction = types.GET_TREND_PROMO_AMOUNT;
          break;
        case 'totalFirstSaveUser':
          targetAction = types.GET_TOTALREAL_TIME_RIRSTRECHARGE_USER;
          break;
        case 'totalRechargeMoney':
          targetAction = types.GET_TOTALREAL_TIME_FIRSTRECHARGE_MONEY;
          break;
      }
      let stime;
      let etime;
      if (!_.isUndefined(this.summaryTime) && _.isArray(this.summaryTime)) {
        stime = moment(this.summaryTime[0]).valueOf();
        etime = moment(this.summaryTime[1]).valueOf() + 86399999;
      }
      this.$store.dispatch(targetAction, {
        isFake: this.generalStatisticsRange,
        stime,
        etime,
        project: consts.PLATFROM_PREFIX,
      });
    },

    categoryChange(category) {
      this.currentCategory = category;
    },
    changeGameStatisticType(type) {
      this.currentGameStatisticType = type;
    },
    // 打开弹窗
    checkDetail(visibalDialog) {
      this.visibleDialog = visibalDialog;
    },
    // 关闭弹窗
    closeDialog() {
      this.visibleDialog = undefined;
    },
    checkGame(type, gameInfo, gamePlatformId) {
      if (_.has(gameInfo, gamePlatformId)) {
        return type === 1 ? Number(gameInfo[gamePlatformId].win) : gameInfo[gamePlatformId].amount;
      }
      return 0;
    },
    getTotal(type, gameInfo) {
      let total = 0;
      const arr = _.toArray(gameInfo);
      if (type === 1) {
        total = Number(_.sumBy(arr, item => item.win)).toFixed(2);
      } else {
        total = _.sumBy(arr, item => item.amount);
      }
      return total;
    },
  },
};
</script>
<style lang="scss" scoped>
  $color-green: #67C23A;
  $color-orange: #E6A23C;
  $color-red: #F56C6C;
  $color-grey: #909399;

  $border-color-1: #DCDFE6;
  $border-color-2: #E4E7ED;
  $border-color-3: #EBEEF5;
  $border-color-4: #F2F6FC;

  $font-color-1: #303133;
  $font-color-2: #606266;
  $font-color-3: #909399;
  $font-color-4: #C0C4CC;

  .m-l-10 {
    margin-left: 10px;
  }

  .box-card {
    width: 100%;
    margin: 10px 0;
  }

  .height-300 {
    height: 300px;
  }

  .db-category-list {
    border: 1px solid $border-color-1;
    overflow: hidden;
    /*display: flex;*/
  }

  .db-category-item {
    height: 100px;
    padding: 10px;
    border: 1px solid $border-color-1;
    border-right: 1px solid $border-color-1;
    line-height: 16px;
    cursor: pointer;

    &:last-child {
      border-right: 1px solid $border-color-1;
    }

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    &.active {
      background: #e7e7e7;
      /*color: #fff;*/
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }


  .db-date-filter {
    height: 18px;
    margin: 10px 10px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .db-profit-filter {
    position: absolute;
    height: 18px;
    margin: 37px 10px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;

    .el-button {
      font-style: italic;

      &.active {
        /*border: 1px solid #409eff ;*/
        font-weight: 900;
        font-style: normal;
        font-size: 16px;
      }
    }
  }

  .profit-chart {
    margin-top: 20px;
  }

  .card-name {
    height: 50px;
    text-align: center;
    flex: 0 1 50%;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-data {
    height: 25px;
    text-align: center;
    flex: 0 1 25%;
  }

  .card-rate {
    height: 25px;
    text-align: center;
    flex: 0 1 25%;
  }

  .box-card-half {
    width: 100%;
    height: 400px;
    /*margin: 10px 0;*/
    margin-bottom: 5px;
  }

  .green {
    color: green;
  }

  .red {
    color: red;
  }
  .list-profit-loss{
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    .detail{
      max-width: 110px;
      min-width: 80px;
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      text-align: center;
      border-right: 1px solid #ebeef5;
      .detail-item{
        border-bottom: 1px solid #ebeef5;
        padding: 6px 10px;

      }
    }
  }
</style>
